<!--
    应收 弹窗

    参数：
    modal       弹窗开关

    modalTitle  弹窗title
    dataDict    数据字典

    方法:
    closeModal          关闭弹窗
 -->
<template>
    <Modal :title="modalTitle" v-model="isModalOpen" :mask-closable="false" width="950" :draggable="true"
           @on-visible-change="changeModalState" footer-hide>
        <div class="ActivatedCase">
            <Form ref="formValidate" :model="formValidate" :label-width="100" disabled>

                <!--                    <Col span="8">-->
                <!--                        <FormItem label="主体类型:">-->
                <!--                            <div>{{getTitle('PersonRoleType',formValidate.custRole)}}</div>-->
                <!--                        </FormItem>-->
                <!--                    </Col>-->
                <span>
                    <row>
                        <Col span="8">
                            <FormItem label="内部合同号:">
                            <div>
                                {{formValidate.contractNo}}
                            </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="费用:">
                                <div>
                                    {{formValidate.sumRemainingAmt}}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem :label-width="120" label="未偿逾期罚息总额:">
                                <div>
                                    {{formValidate.sumPenaltyAmt}}
                                </div>
                            </FormItem>
                        </Col>
                    </row>
                    <row>
                        <Col span="8">
                            <FormItem label="合同状态:">
                                <div>{{getTitle('contractStatus',formValidate.contractStatus)}}</div>
                            </FormItem>
                        </Col>
                    </row>
                </span>
                <span>
                    <row>
                        <Col span="8">
                            <FormItem label="客户姓名:">
                                <div>{{formValidate.custName}}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="金融产品:">
                                <div>{{formValidate.productName}}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="未偿本金总额:">
                                <div>{{formValidate.sumReceivablePrinciple}}</div>
                            </FormItem>
                        </Col>
                    </row>
                    <row>
                        <Col span="8">
                            <FormItem label="未偿利息总额:">
                                <div>{{formValidate.sumReceivableInterest}}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="贷款总额:">
                                <div>{{formValidate.loanAmt}}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="首付总额:">
                                <div>{{formValidate.downPayAmt}}</div>
                            </FormItem>
                        </Col>
                    </row>
                </span>
                <!--                    <Col span="8">-->
                <!--                        <FormItem label="本金:">-->
                <!--                            <div>{{formValidate.applyNo}}</div>-->
                <!--                        </FormItem>-->
                <!--                    </Col>-->
                <span>
                    <row>
                        <Col span="8">
                            <FormItem label="未分配总额:">
                                <div>{{formValidate.sumUnusedAmt}}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="未偿总额:">
                                <div>{{formValidate.outstandingTotalAmt}}</div>
                            </FormItem>
                        </Col>
                    </row>
                </span>
                <!--                    <Col span="8">-->
                <!--                        <FormItem label="利息总额:">-->
                <!--                            <div>{{formValidate.applyNo}}</div>-->
                <!--                        </FormItem>-->
                <!--                    </Col>-->
                <!--                    <Col span="8">-->
                <!--                        <FormItem label="汇总金额:">-->
                <!--                            <div>{{formValidate.applyNo}}</div>-->
                <!--                        </FormItem>-->
                <!--                    </Col>-->
                <!--                    <Col span="8">-->
                <!--                        <FormItem label="汇总本金:">-->
                <!--                            <div>{{formValidate.applyNo}}</div>-->
                <!--                        </FormItem>-->
                <!--                    </Col>-->

            </Form>
        </div>
    </Modal>
</template>

<script>
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import {financialAgree, financialAgreeByCar} from "_p/basic/api/contract/contract-detail-inquiry";
    import {deepClone} from "@/libs/utils/ObjectClone";

    export default {
        // 应收
        name: "Receivable",
        components: {},
        props: {
            dataDict: {
                type: Object
            },
            pageParams: {
                type: Object
            },
            contractNo: {
                type: String,
                required: true
            },
            modal: {
                type: Boolean,
                required: true
            },

            // modalTitle: {
            //     type: String,
            //     default: "应收"
            // },

        },
        data() {
            return {
                isModalOpen: this.modal,
                loading: false,
                modalTitle:'',
                formValidate: {
                    custRole: "",
                    custName: "",
                    contractNo: "",
                    productName: "",
                    contractStatus: "",
                    loanAmt: "",
                    downPayAmt: "",
                }
            };
        },
        watch: {
            modal: function (newVal) {
                if (newVal) {
                    this.isModalOpen = newVal;
                    this.getList(this.contractNo);
                }
            }
        },
        mounted() {
            this.init();
            this.formValidate = Object.assign({}, this.formValidate, deepClone(this.pageParams));
            this.modalTitle = `应收   ${this.contractNo}`
        },
        methods: {
            init() {
                this.financialAgreeByCar();
                this.financialAgree();
            },
            financialAgreeByCar() {
                financialAgreeByCar(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.formValidate = Object.assign({}, this.formValidate, deepClone(res.data));
                    }
                });
            },

            financialAgree() {
                financialAgree(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.formValidate = Object.assign({}, this.formValidate, deepClone(res.data));
                    }
                });
            },

            //  弹窗切换
            changeModalState(bool) {
                if (!bool) this.$emit("closeModal");
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        }
    };
</script>
<style scoped lang="less">
</style>
